<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TravelWorld - 多语言旅游预订</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
        }

        header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #3498db;
        }

        .language-selector {
            position: relative;
            margin-left: 20px;
        }

        .language-selector select {
            padding: 5px 10px;
            border-radius: 4px;
            border: none;
            background-color: #34495e;
            color: white;
            cursor: pointer;
        }

        .hero {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/1600x900/?travel');
            background-size: cover;
            background-position: center;
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }

        .hero-content h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .hero-content p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

        .btn {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        .destinations {
            padding: 4rem 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 3rem;
        }

        .destination-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }

        .destination-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .destination-card:hover {
            transform: translateY(-5px);
        }

        .destination-img {
            height: 200px;
            background-size: cover;
            background-position: center;
        }

        .destination-info {
            padding: 20px;
        }

        .destination-info h3 {
            margin-bottom: 10px;
        }

        .destination-info p {
            margin-bottom: 15px;
            color: #666;
        }

        .price {
            font-weight: bold;
            color: #2c3e50;
            font-size: 1.2rem;
        }

        .booking-form {
            background-color: white;
            padding: 3rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 4rem 0;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        footer {
            background-color: #2c3e50;
            color: white;
            padding: 2rem 0;
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <nav>
                <div class="logo" data-lang-key="brand">TravelWorld</div>
                <ul class="nav-links">
                    <li><a href="#" data-lang-key="home">Home</a></li>
                    <li><a href="#" data-lang-key="destinations">Destinations</a></li>
                    <li><a href="#" data-lang-key="about">About</a></li>
                    <li><a href="#" data-lang-key="contact">Contact</a></li>
                    <li class="language-selector">
                        <select id="language-select">
                            <option value="en-US">English</option>
                            <option value="zh-CN">中文</option>
                            <option value="es-ES">Español</option>
                            <option value="fr-FR">Français</option>
                            <option value="ja-JP">日本語</option>
                        </select>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero">
        <div class="hero-content">
            <h1 data-lang-key="hero-title">Discover Amazing Destinations</h1>
            <p data-lang-key="hero-subtitle">Find and book your perfect trip with us</p>
            <a href="#booking" class="btn" data-lang-key="book-now">Book Now</a>
        </div>
    </section>

    <section class="destinations container">
        <h2 class="section-title" data-lang-key="popular-destinations">Popular Destinations</h2>
        <div class="destination-grid">
            <div class="destination-card">
                <div class="destination-img"
                    style="background-image: url('https://source.unsplash.com/300x200/?paris');"></div>
                <div class="destination-info">
                    <h3 data-lang-key="paris">Paris</h3>
                    <p data-lang-key="paris-desc">Experience the city of love with its iconic Eiffel Tower and charming
                        streets.</p>
                    <p class="price">$1299</p>
                    <a href="#booking" class="btn" data-lang-key="book-now">Book Now</a>
                </div>
            </div>
            <div class="destination-card">
                <div class="destination-img"
                    style="background-image: url('https://source.unsplash.com/300x200/?tokyo');"></div>
                <div class="destination-info">
                    <h3 data-lang-key="tokyo">Tokyo</h3>
                    <p data-lang-key="tokyo-desc">Explore the vibrant blend of traditional culture and modern
                        technology.</p>
                    <p class="price">$1599</p>
                    <a href="#booking" class="btn" data-lang-key="book-now">Book Now</a>
                </div>
            </div>
            <div class="destination-card">
                <div class="destination-img"
                    style="background-image: url('https://source.unsplash.com/300x200/?bali');"></div>
                <div class="destination-info">
                    <h3 data-lang-key="bali">Bali</h3>
                    <p data-lang-key="bali-desc">Relax on beautiful beaches and immerse yourself in rich cultural
                        experiences.</p>
                    <p class="price">$1099</p>
                    <a href="#booking" class="btn" data-lang-key="book-now">Book Now</a>
                </div>
            </div>
        </div>
    </section>

    <section id="booking" class="container">
        <div class="booking-form">
            <h2 class="section-title" data-lang-key="book-your-trip">Book Your Trip</h2>
            <form id="booking-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="destination" data-lang-key="select-destination">Select Destination</label>
                        <select id="destination" required>
                            <option value="" data-lang-key="choose">Choose...</option>
                            <option value="paris" data-lang-key="paris">Paris</option>
                            <option value="tokyo" data-lang-key="tokyo">Tokyo</option>
                            <option value="bali" data-lang-key="bali">Bali</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="travelers" data-lang-key="travelers">Number of Travelers</label>
                        <input type="number" id="travelers" min="1" value="2" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="departure" data-lang-key="departure-date">Departure Date</label>
                        <input type="date" id="departure" required>
                    </div>
                    <div class="form-group">
                        <label for="return" data-lang-key="return-date">Return Date</label>
                        <input type="date" id="return" required>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn" data-lang-key="search-availability">Search Availability</button>
                </div>
            </form>
        </div>
    </section>

    <footer>
        <div class="container">
            <p data-lang-key="copyright">© 2023 TravelWorld. All rights reserved.</p>
        </div>
    </footer>

    <script>
        // 语言检测函数
        const detectLanguage = (defaultLang = 'en-US') =>
            navigator.language ||
            (Array.isArray(navigator.languages) && navigator.languages[0]) ||
            defaultLang;

        // 语言包
        const translations = {
            'en-US': {
                'brand': 'TravelWorld',
                'home': 'Home',
                'destinations': 'Destinations',
                'about': 'About',
                'contact': 'Contact',
                'hero-title': 'Discover Amazing Destinations',
                'hero-subtitle': 'Find and book your perfect trip with us',
                'book-now': 'Book Now',
                'popular-destinations': 'Popular Destinations',
                'paris': 'Paris',
                'paris-desc': 'Experience the city of love with its iconic Eiffel Tower and charming streets.',
                'tokyo': 'Tokyo',
                'tokyo-desc': 'Explore the vibrant blend of traditional culture and modern technology.',
                'bali': 'Bali',
                'bali-desc': 'Relax on beautiful beaches and immerse yourself in rich cultural experiences.',
                'book-your-trip': 'Book Your Trip',
                'select-destination': 'Select Destination',
                'choose': 'Choose...',
                'travelers': 'Number of Travelers',
                'departure-date': 'Departure Date',
                'return-date': 'Return Date',
                'search-availability': 'Search Availability',
                'copyright': '© 2023 TravelWorld. All rights reserved.'
            },
            'zh-CN': {
                'brand': '环球旅行',
                'home': '首页',
                'destinations': '目的地',
                'about': '关于我们',
                'contact': '联系我们',
                'hero-title': '探索精彩目的地',
                'hero-subtitle': '找到并预订您的完美旅行',
                'book-now': '立即预订',
                'popular-destinations': '热门目的地',
                'paris': '巴黎',
                'paris-desc': '体验爱情之城，欣赏标志性的埃菲尔铁塔和迷人的街道。',
                'tokyo': '东京',
                'tokyo-desc': '探索传统文化与现代科技的完美融合。',
                'bali': '巴厘岛',
                'bali-desc': '在美丽的海滩上放松，沉浸在丰富的文化体验中。',
                'book-your-trip': '预订您的旅行',
                'select-destination': '选择目的地',
                'choose': '请选择...',
                'travelers': '旅行人数',
                'departure-date': '出发日期',
                'return-date': '返回日期',
                'search-availability': '查询可用性',
                'copyright': '© 2023 环球旅行。保留所有权利。'
            },
            'es-ES': {
                'brand': 'MundoViajes',
                'home': 'Inicio',
                'destinations': 'Destinos',
                'about': 'Acerca de',
                'contact': 'Contacto',
                'hero-title': 'Descubre Destinos Increíbles',
                'hero-subtitle': 'Encuentra y reserva tu viaje perfecto con nosotros',
                'book-now': 'Reservar Ahora',
                'popular-destinations': 'Destinos Populares',
                'paris': 'París',
                'paris-desc': 'Experimenta la ciudad del amor con su icónica Torre Eiffel y encantadoras calles.',
                'tokyo': 'Tokio',
                'tokyo-desc': 'Explora la vibrante mezcla de cultura tradicional y tecnología moderna.',
                'bali': 'Bali',
                'bali-desc': 'Relájate en hermosas playas y sumérgete en ricas experiencias culturales.',
                'book-your-trip': 'Reserva Tu Viaje',
                'select-destination': 'Seleccionar Destino',
                'choose': 'Elegir...',
                'travelers': 'Número de Viajeros',
                'departure-date': 'Fecha de Salida',
                'return-date': 'Fecha de Regreso',
                'search-availability': 'Buscar Disponibilidad',
                'copyright': '© 2023 MundoViajes. Todos los derechos reservados.'
            },
            'fr-FR': {
                'brand': 'MondeDuVoyage',
                'home': 'Accueil',
                'destinations': 'Destinations',
                'about': 'À Propos',
                'contact': 'Contact',
                'hero-title': 'Découvrez des Destinations Incroyables',
                'hero-subtitle': 'Trouvez et réservez votre voyage parfait avec nous',
                'book-now': 'Réserver Maintenant',
                'popular-destinations': 'Destinations Populaires',
                'paris': 'Paris',
                'paris-desc': 'Découvrez la ville de l\'amour avec sa Tour Eiffel emblématique et ses rues charmantes.',
                'tokyo': 'Tokyo',
                'tokyo-desc': 'Explorez le mélange vibrant de culture traditionnelle et de technologie moderne.',
                'bali': 'Bali',
                'bali-desc': 'Détendez-vous sur de belles plages et immergez-vous dans de riches expériences culturelles.',
                'book-your-trip': 'Réservez Votre Voyage',
                'select-destination': 'Sélectionner une Destination',
                'choose': 'Choisir...',
                'travelers': 'Nombre de Voyageurs',
                'departure-date': 'Date de Départ',
                'return-date': 'Date de Retour',
                'search-availability': 'Rechercher la Disponibilité',
                'copyright': '© 2023 MondeDuVoyage. Tous droits réservés.'
            },
            'ja-JP': {
                'brand': 'トラベルワールド',
                'home': 'ホーム',
                'destinations': '目的地',
                'about': '会社概要',
                'contact': 'お問い合わせ',
                'hero-title': '素晴らしい目的地を発見しよう',
                'hero-subtitle': '完璧な旅行を見つけて予約しましょう',
                'book-now': '今すぐ予約',
                'popular-destinations': '人気の目的地',
                'paris': 'パリ',
                'paris-desc': '象徴的なエッフェル塔と魅力的な通りがある愛の街を体験してください。',
                'tokyo': '東京',
                'tokyo-desc': '伝統文化と現代技術の活気ある融合を探索してください。',
                'bali': 'バリ',
                'bali-desc': '美しいビーチでリラックスし、豊かな文化体験に浸ってください。',
                'book-your-trip': '旅行を予約する',
                'select-destination': '目的地を選択',
                'choose': '選択...',
                'travelers': '旅行者数',
                'departure-date': '出発日',
                'return-date': '帰国日',
                'search-availability': '空き状況を検索',
                'copyright': '© 2023 トラベルワールド。全著作権所有。'
            }
        };

        // 应用语言设置
        function applyLanguage(lang) {
            // 如果没有对应的语言包，使用英语作为默认语言
            const currentLang = translations[lang] || translations['en-US'];

            // 更新所有带有 data-lang-key 属性的元素
            document.querySelectorAll('[data-lang-key]').forEach(element => {
                const key = element.getAttribute('data-lang-key');
                if (currentLang[key]) {
                    // 如果是输入元素，更新 placeholder
                    if (element.tagName === 'INPUT' && element.getAttribute('placeholder')) {
                        element.setAttribute('placeholder', currentLang[key]);
                    }
                    // 如果是选择元素的选项
                    else if (element.tagName === 'OPTION') {
                        element.textContent = currentLang[key];
                    }
                    // 其他元素更新内容
                    else {
                        element.textContent = currentLang[key];
                    }
                }
            });

            // 更新语言选择器的值
            document.getElementById('language-select').value = lang;

            // 保存用户语言偏好到本地存储
            localStorage.setItem('preferredLanguage', lang);
        }

        // 初始化函数
        function initializeApp() {
            // 获取用户首选语言
            const savedLanguage = localStorage.getItem('preferredLanguage');
            const browserLanguage = detectLanguage();

            // 使用保存的语言偏好或浏览器语言
            const initialLanguage = savedLanguage || browserLanguage;

            // 应用语言设置
            applyLanguage(initialLanguage);

            // 设置语言选择器的事件监听器
            document.getElementById('language-select').addEventListener('change', function () {
                applyLanguage(this.value);
            });

            // 设置预订表单的事件监听器
            document.getElementById('booking-form').addEventListener('submit', function (e) {
                e.preventDefault();
                const destination = document.getElementById('destination').value;
                const travelers = document.getElementById('travelers').value;
                const departure = document.getElementById('departure').value;
                const returnDate = document.getElementById('return').value;

                // 在实际应用中，这里会发送预订请求到服务器
                // 这里只是简单地显示一个警告
                const lang = document.getElementById('language-select').value;
                const message = {
                    'en-US': `Booking request submitted for ${destination} with ${travelers} travelers from ${departure} to ${returnDate}`,
                    'zh-CN': `已提交${destination}的预订请求，${travelers}位旅客，从${departure}到${returnDate}`,
                    'es-ES': `Solicitud de reserva enviada para ${destination} con ${travelers} viajeros desde ${departure} hasta ${returnDate}`,
                    'fr-FR': `Demande de réservation soumise pour ${destination} avec ${travelers} voyageurs du ${departure} au ${returnDate}`,
                    'ja-JP': `${departure}から${returnDate}まで、${travelers}人の旅行者と${destination}の予約リクエストが送信されました`
                };

                alert(message[lang] || message['en-US']);
            });

            // 设置当前日期和最小日期
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('departure').min = today;
            document.getElementById('return').min = today;

            // 默认设置出发日期为今天，返回日期为一周后
            document.getElementById('departure').value = today;

            const nextWeek = new Date();
            nextWeek.setDate(nextWeek.getDate() + 7);
            document.getElementById('return').value = nextWeek.toISOString().split('T')[0];
        }

        // 当DOM加载完成后初始化应用
        document.addEventListener('DOMContentLoaded', initializeApp);
    </script>
</body>

</html>